<template>
  <div>
    <div class="shousuoBox">
      <el-input
        :value="nameList"
        @input="lala"
        clearable
        prefix-icon="el-icon-search"
        placeholder="请输入"
        class="search_btn"
      ></el-input>
      <el-button size="small" plain type="primary" @click="getBuAPI">搜索</el-button>
    </div>
    <div id="container" :style="{ minHeight: transferHeight + 'px' }"></div>
    <el-dialog title="测试" :visible.sync="dialogTableVisible" @close="lajis">
      <video width="100%" height="600" controls id="videoss">
        <source
          src="https://v1.cecdn.yun300.cn/100001_1911295043/%E4%B8%AD%E6%96%87%E5%85%AC%E5%8F%B8%E4%BB%8B%E7%BB%8D%E8%A7%86%E9%A2%91.mp4"
          type="video/mp4"
        />
        <source src="movie.ogg" type="video/ogg" />您的浏览器不支持 HTML5 video 标签。
      </video>
    </el-dialog>
  </div>
</template>
<script>
// import { endLoading } from '@/utils/loading.js'
const BMap = window.BMap
const labelStyle = {
  cursor: 'pointer',
  border: '0px solid rgba(255,0,0)',
  padding: '0px',
  whiteSpace: 'nowrap',
  fontSize: '12px',
  color: 'rgba(255,255,255)',
  textAlign: 'center'
}
export default {
  data() {
    return {
      pointNames: [
        { v1: 112.945441, v2: 28.234639 },
        { v1: 112.951118, v2: 28.227129 },
        { v1: 112.95331, v2: 28.224821 },
        { v1: 112.94598, v2: 28.224185 },
        { v1: 112.951226, v2: 28.223628 },
        { v1: 112.946465, v2: 28.224002 }
      ],
      pointNames2: [
        { v1: 112.947399, v2: 28.224527 },
        { v1: 112.946564, v2: 28.225553 },
        { v1: 112.949645, v2: 28.226007 },
        { v1: 112.950435, v2: 28.223731 },
        { v1: 112.951136, v2: 28.224069 },
        { v1: 112.952609, v2: 28.22461 }
      ],
      dialogTableVisible: false,
      nameList: ''
    }
  },
  created() {
    // endLoading()
  },
  computed: {
    transferHeight: function() {
      // 计算屏幕滚动高度 - nav - 导航栏
      return window.innerHeight - 150
    }
  },
  mounted() {
    this.getBuAPI()
  },
  methods: {
    getBuAPI() {
      //  var map = new BMap.Map('container', { mapType: window.BMAP_SATELLITE_MAP }) // 创建地图实例
      var map = new BMap.Map('container') // 创建地图实例
      var point = new BMap.Point(112.93, 28.23) // 创建点坐标
      map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
      // var scaleCtrl = new BMap.ScaleControl() // 添加比例尺控件
      // map.addControl(scaleCtrl)
      // var zoomCtrl = new BMap.NavigationControl() // 添加缩放控件
      // map.addControl(zoomCtrl)
      // map.addControl(new BMap.MapTypeControl()) // 地图类型控件，默认位于地图右上方。
      // // 创建标注对象并添加到地图
      var local = new BMap.LocalSearch(map, {
        renderOptions: { map: map }
      })
      local.search(this.nameList)
      this.pointNames.forEach((item, index) => {
        const point2 = new BMap.Point(item.v1, item.v2) // 创建点坐标
        const title = '无敌摄像机' + index
        const num = index
        this.chuangjian(map, point2, title, num)
      })
    },
    chuangjian(map, point2, title, num) {
      // 添加文字覆盖物;
      const opts = {
        position: point2, // 指定文本标注所在的地理位置
        offset: new BMap.Size(-35, -35) // 设置文本偏移量
      }
      const label2 = new BMap.Label('', opts) // 创建文本标注对象
      // 设置房源覆盖物内容
      label2.setContent(`
            <div class="bubble">
              <p class="name">${title}</p>
              <p>${num}台</p>
            </div>
            `)
      label2.setStyle(labelStyle)
      label2.addEventListener('click', () => {
        map.centerAndZoom(point2, 18) // 初始化地图，设置中心点坐标和地图级别
        setTimeout(() => {
          this.addtu(map)
        }, 500)
        setTimeout(() => {
          // 清除覆盖物
          map.clearOverlays()
        }, 1)
      })
      map.addOverlay(label2)
    },
    addtu(map) {
      this.pointNames2.forEach((item, index) => {
        // 添加文字覆盖物;
        const opts = {
          position: new BMap.Point(item.v1, item.v2), // 指定文本标注所在的地理位置
          offset: new BMap.Size(-35, -35) // 设置文本偏移量
        }
        const label3 = new BMap.Label('', opts) // 创建文本标注对象
        // 设置房源覆盖物内容
        label3.setContent(`
            <div class="bubble">
              <p class="name">${'摄像机' + index}</p>
              <p>${index}台</p>
            </div>
            `)
        label3.setStyle(labelStyle)
        map.addOverlay(label3)
        label3.addEventListener('click', () => {
          this.dialogTableVisible = true
        })
      })
    },
    lajis() {
      const myvideo = document.getElementById('videoss')
      myvideo.pause()
    },
    lala(val) {
      this.nameList = val
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .anchorBL {
  display: none;
}
::v-deep .name {
  padding: 10px 0 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
::v-deep .bubble {
  width: 50px;
  height: 50px;
  padding: 0 5px;
  box-sizing: border-box;
  line-height: 1;
  display: inline-block;
  position: absolute;
  border-radius: 100%;
  background-color: pink;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.8);
  text-align: center;
  cursor: pointer;
}
.shousuoBox {
  position: absolute;
  left: 5px;
  top: 5px;
  display: flex;
  color: #000;
  font-size: 16px;
  z-index: 99;
  .el-button {
    margin-left: 20px;
  }
}
</style>
